<template>
  <el-breadcrumb class="app-breadcrumb">
    <div class="left-containner">
      <!--<div class="logo"><img class="logo" :src="logo"/></div>-->
      <!--<div class="logo"><img class="logo" :src="wdrlogo" /></div>-->
      <!--<div class="nav">-->
        <!--<ul>-->
          <!--<li v-for="(route,index) in routes" :key="index" @click="selectItem(route)"-->
              <!--:class="{selectStyle:selectItemStyle(route)}">{{route.name}}-->
          <!--</li>-->
          <!--&lt;!&ndash;{selectStyle:$store.getters.user.authen_select_item.jur === route.jur}&ndash;&gt;-->
          <!--&lt;!&ndash;<router-link v-for="(route,index) in routes" :to="route.url"><li>{{route.name}}</li></router-link>&ndash;&gt;-->
          <!--&lt;!&ndash;<router-link to="/controlStationindex"><li>控制台</li></router-link>&ndash;&gt;-->
          <!--&lt;!&ndash;<li>管理驾驶舱</li>&ndash;&gt;-->
          <!--&lt;!&ndash;<li>服务商城</li>&ndash;&gt;-->
        <!--</ul>-->
      <!--</div>-->
    </div>
  </el-breadcrumb>
</template>

<script>
  import logo from '@/assets/home/logo.png'
  import wdrlogo from '@/assets/home/wdrlogo1.png'

  export default {
    created() {
      this.getBreadcrumb()
    },
    data() {
      return {
        logo,
        wdrlogo,
        levelList: null
      }
    },
    computed: {
      routes() {
        let authen = this.$store.getters.authen
        let routes = this.$router.options.routes
        console.log('authen', authen)
        console.log('routes', routes)
        console.log('this.items', this.items)
        // return this.items
        return authen
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb()
      }
    },
    methods: {
      getBreadcrumb() {
        let matched = this.$route.matched.filter(item => item.name)
        const first = matched[0]
        if (first && first.name !== 'dashboard') {
          matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
        }
        this.levelList = matched
      },
      selectItem(route) {
        // console.log(route)
        if (route.url) {
          this.$router.push({ path: route.url })
        }
      },
      selectItemStyle(route) {
        if (!route || !this.$store.getters.user.authen_select_item) {
          return false
        }
        if (this.$store.getters.user.authen_select_item.jur === route.jur) {
          return true
        }
        return false
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 10px;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }

  .left-containner {
    width: 400px;
    height: 50px;
    line-height: 50px;
    float: left;
    .logo {
      float: left;
    }
    .logo img {
      margin-top: 7px;
      cursor: pointer;
      margin-left: 10px;
    }
    .nav {
      float: left;
      color: white;
      width: 500px;
      height: 50px;

    }
    .nav ul {
      margin: 4px 0;
      Width: 500px;
      height: 40px;
      padding: 0;
      list-style: none;
      cursor: pointer;

    }
    .nav ul li {
      float: left;
      text-align: center;
      width: 100px;
      font: 16px/2.5 "microsoft yahei";

    }

  }

  .selectStyle {
    background-color: rgb(18, 24, 32);
    color: rgb(64, 158, 255);
  }

</style>
